|
实验目的
认识Ajax的作用；能在JSP中应用Ajax与Servlet进行交互。
实验内容
创建一个Java Web应用，综合利用JSP、Ajax和Servlet技术实现中英文互译功能：
在输入框输入英文单词时，在后面即时显示翻译为中文的结果；在输入框输入中文词汇时，在后面即时显示翻译为英文的结果。
界面如图（可以适当改进，添加其他功能）：
Ajax.jsp
小黄翻译
function adjaxReq(){
var word = document.getElementById("word");
var wordx = word.value;
var req = new XMLHttpRequest();
req.open("GET","./translate.html?wordx="+wordx,true);
req.send();
req.onreadystatechange = function(){
if (req.status == 200 && req.readyState == 4){
console.log(req.responseText);
var divx = document.getElementById("showtips");
divx.innerHTML = req.responseText;
}
};
}
翻译：
Trans.java
package gdpu.com;
import java.sql.*;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class Trans
*/
@WebServlet("/Trans")
public class Trans extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String codex = request.getParameter("wordx");
try {
Class.forName("com.mysql.jdbc.Driver"); // 驱动程序名
String url = "jdbc:mysql://localhost:3306/实验"; // 数据库名
String username = "root"; // 数据库用户名
String password = "0403"; // 数据库用户密码
Connection conn = DriverManager.getConnection(url, username, password); // 连接状态
if (conn != null) {
Statement stmt = null;
ResultSet rs = null;
stmt = conn.createStatement();
String sql = "SELECT * FROM translate where English ='" + codex + "' or Chinese='" + codex + "'";// 查询语句
rs = stmt.executeQuery(sql);
System.out.print(sql);
while (rs.next()) {
response.getWriter().print(rs.getString(1) + ";" + rs.getString(2));
conn.close();
return;
}
response.getWriter().print("未查到该单词翻译。");
} else {
System.out.print("连接失败！");
}
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
监听输入的方法有以下三个，可以根据实际情况使用：
onchange事件:此事件会在元素内容发生改变，且失去焦点的时候触发。浏览器支持度较好。
onpropertychange事件:此事件会在元素内容发生改变时立即触发，即便是通过js改变的内容也会触发此事件。元素的任何属性改变都会触发该事件，不止是value。只有IE11以下浏览器支持此事件。
oninput事件:此事件会在value属性值发生改变时触发，通过js改变value属性值不会触发此事件。只有IE8以上或者谷歌火狐等标准浏览器支持。
|